<template>
 <div class="edit_all" :class="{ 'edit_show': isShow }">
    <div class="edit_box">
      <div class="edit_top">
        <ul class="edit_tab">
          <li 
            v-for="(item, index) in resumeList"
            :key="index"
            :class="[ curIndex === index ? 'active' : '' ]"
            @click="clickHandler(item, index)">
            <div class="circle" :class="{'disabled': item.isDisabled, 'checked': curIndex === index }"
              @click.stop="clickCircleHandle(index, item.isDisabled)"></div>
            <b :class="{ disabled: item.isDisabled }">{{item.name}}</b>
          </li>
        </ul>
      </div>
      <div class="edit_b">
        <div class="edit_b_list active" v-if="curIndex === 0 && !resumeList[0].isDisabled">
          <basicEdit id="basicInfo" @work-input="workInput" :init-data="inintBasic" />
        </div>
        <div class="edit_b_list active" v-if="curIndex === 1 && !resumeList[1].isDisabled">
          <resume-edit cur-id="jineng" @inputValue="inputValue" :cur-index="0" :msg="initAbality" /> 
        </div>
        <div class="edit_b_list active" v-if="curIndex === 2 && !resumeList[2].isDisabled">
          <work-edit @inputValue="inputValue" @work-input="workInput" :nums="workNums" :initData="initWork" /> 
          <button class="resume-btn" @click="workAction('work')">新增一条 工作经验</button>
        </div>
        <div class="edit_b_list active" v-if="curIndex === 3 && !resumeList[3].isDisabled">
          <project-edit id="project" @inputValue="inputValue" @work-input="workInput" :nums="projectNums" :initData="initProject" /> 
          <button class="resume-btn" @click="workAction('project')">新增一条 项目经验</button>
        </div>
        <div class="edit_b_list active" v-if="curIndex === 4 && !resumeList[4].isDisabled">
          <resume-edit cur-id="evaluate" @inputValue="inputValue" :cur-index="0" :msg="initEvaluate" />
        </div>
      </div>
      <div title="收起编辑区" class="close webfont webicon-jiantoudown" @click="isShow = !isShow" :class="{ animate: !isShow }">
        <div class="sign" style="">
          <el-icon :size="24"><DArrowLeft /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, ref, computed, reactive } from 'vue';
import { ElNotification } from 'element-plus';
import resumeEdit from './EditorAction.vue';
import basicEdit from './basicEdit';
import workEdit from './workEdit';
import projectEdit from './projectEdit';
const props = defineProps({
  rList: {
    type: Array,
    default: [],
  },
});

let woData = reactive([]);
const workNums = ref(1);
const projectNums = ref(1);

const emit = defineEmits(['input-action', 'change-tab']);



const resumeList = computed(() => {
  let list = JSON.parse(JSON.stringify(props.rList));
  return list;
});



const resumeData = computed(() => props.rList);

const inintBasic = computed(() => resumeData?.value[0]?.project || {});

const initAbality = computed(() => {
  return resumeData?.value[1]?.project?.value?.value || '';
});
const initEvaluate = computed(() => resumeData?.value[4]?.project?.value?.value || '');

const initWork = computed(() => {
  return resumeData.value[2]?.project || [];
});

const initProject = computed(() => resumeData.value[3]?.project || [])

const isShow = ref(false);
const curIndex = ref(0);


const clickHandler = (item, index) => {
  if (item.isDisabled) {
    ElNotification({
      title: '这是一个隐藏模块',
      message: '请点击标题右侧的灰色开关',
      type: 'warning',
    });
    return;
  }
  curIndex.value = index;
};
const clickCircleHandle = (index, status) => {
  emit('change-tab', index);
};

const workInput = (res) => {
  res = JSON.parse(res);
  emit('input-action', res);
};

const workAction = (type) => {
  if (type === 'work') workNums.value+=1;
  if (type === 'project') projectNums.value+=1;
};

const inputValue = (value) => {
  const project = {
    type: value.type,
    value,
  };
  emit('input-action', project);
};
</script>
<style>
.edit_box .sign {
  transform: rotate(90deg);
  display: flex;
  justify-content: center;
  margin-top: 5px;
}
.circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 100%;
  right: 10%;
  top: 50%;
  transition: all .2s ease-out 0s;
  background-color: rgb(20, 103, 204);
  opacity: .7;
}
.circle.disabled {
  background-color: #ccc !important;
}
.circle.checked {
  background-color: rgb(20, 103, 204);
  opacity: 1;
}
.edit_top .edit_tab li b.disabled {
  color: #ccc !important;
}
</style>